{% extends 'backend.html.twig' %}

{% block body %}
    <div id="wrapper">
        <div id="container">
            <button id="act_create">Design</button>
            <button id="act_reload">Reload</button>
            <div id="wrapper">
                <div id="container">
                    <table border="1" cellspacing="0">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Price</th>
                            <th>Customer Name</th>
                            <th>Materials</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="table_body">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        (function ($) {
            $(function () {
                var table_body = $("#table_body");
                var product = (function () {
                    var removeRow = function () {
                        var ele = $(this).closest("tr");
                        var rowdata = JSON.parse(ele.attr("data-row"));
                        console.log(rowdata);
                        layer.confirm('Would you confirm remove "' + rowdata.name + '"？', {
                            btn: ['Yes', 'No'] //按钮
                        }, function () {
                            $.post("{{ asset("product/remove") }}", {id: rowdata.id}, function (res) {
                                console.log(res);
                                if (parseInt(res.code) === 0) {
                                    ele.remove();
                                }
                                layer.msg(res.message);
                            });

                        }, function () {
                        });
                    };
                    var createRow = function (data) {
                        var ele = $(
                            "<tr data-row='" + JSON.stringify(data) + "'>                    <td>" + data.id + "</td>" +
                            "                    <td class='row_name'>" + data.name + "</td>" +
                            "                    <td class='row_description'>" + data.description + "</td>" +
                            "                    <td class='row_price'>" + data.price + "</td>" +
                            "                    <td class='row_customer_name'>" + data.customer_name + "</td>" +
                            "                    <td class='row_materials'>" + data.materials + "</td>" +
                            "<td><button class='act-remove' data-id='" + data.id + "'>remove</button></td><tr>");
                        ele.find("button.act-remove").click(product.removeRow);
                        return ele;
                    };
                    var reload = function () {
                        $.get("{{ asset("product/list") }}", function (res) {
                            console.log(res);
                            if (parseInt(res.code) === 0) {
                                table_body.empty();
                                for (var x in res.data) {
                                    table_body.append(createRow(res.data[x]))
                                }
                            } else {
                                return layer.msg(res.message);
                            }
                        });
                    };
                    return {
                        removeRow: removeRow,
                        reload: reload
                    };
                })();
                $("#act_create").click(function () {
                    location.href = "{{ asset("product/design") }}";
                });
                $("#act_reload").click(product.reload);
                product.reload();
            });
        })(jQuery);
    </script>


{% endblock %}